<template lang="html">
  <div v-loading="loading">
      <div class="tab1">
          <div class="title">基础信息</div>
          <div class="form">
              <div class="form_item">
                  <span> <i>*</i> 商品类型</span>
                  <el-select v-model="form.typeId" @change="selectTypes" placeholder="请选择类型">
                    <el-option v-for="item in types" :key="item.id" :label="item.typeName" :value="item.id"></el-option>
                  </el-select>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 商品款式</span>
                  <el-select v-model="form.styleId" @change="selectStyle" placeholder="请选择款式">
                    <el-option v-for="item in styles" :key="item.id" :label="item.styleName" :value="item.id"></el-option>
                  </el-select>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 商品名称</span>
                  <el-input v-model="form.commodityName"></el-input>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 制作工厂</span>
                  <el-select v-model="form.factoryId" placeholder="请选择工厂">
                    <el-option v-for="item in factorys" :key="item.id" :label="item.factoryName" :value="item.id"></el-option>
                  </el-select>
              </div>
              <div class="form_item">
                  <span> <i>*</i> 商品编码</span>
                  <el-input v-model="form.commodityNumber"></el-input>
              </div>
          </div>

      </div>
      <div class="tab1">
          <div class="title">销售信息</div>
          <div class="form2" style="overflow-x:scroll">
                <div class="form_title">
                  <span> <i>*</i> 颜色型号</span>
                </div>
                <el-form :inline="true" >
                    <el-form-item class="el_form" v-for="(item,index) in domains" :key="index">
                        <el-select class="el_select" style="width: 220px" v-model="item.material" placeholder="请选择材料">
                            <el-option v-for="item in colorModels.materials" :key="item.materialId" :label="item.materialName" :value="item.materialId"></el-option>
                        </el-select>
                        <el-select class="el_select" v-model="item.color" placeholder="请选择颜色">
                            <el-option v-for="item in colorModels.colors" :key="item.colorId" :label="item.colorName" :value="item.colorId"></el-option>
                        </el-select>

                        <el-select class="el_select" v-if="isShowLace" v-model="item.lace" placeholder="请选择蕾丝">
                            <el-option v-for="item in colorModels.laces" :key="item.laceId" :label="item.laceName" :value="item.laceId"></el-option>
                        </el-select>
                        <!-- <el-select class="el_select" v-model="item.model" placeholder="请选择型号">
                            <el-option v-for="item in colorModels.models" :key="item.id" :label="item.model" :value="item.id"></el-option>
                        </el-select> -->
                        <el-input type="number" class="el_input" v-model="item.price" placeholder="请填写价格"></el-input>
                        <span style="margin-right: 20px">元</span>
                        <el-checkbox class="el_select" v-model="item.checked" :true-label="1" :false-label="2">自动派厂</el-checkbox>
                        <el-upload class="upload_img" action="" :file-list="item.imageFile" list-type="picture-card" :auto-upload="false" :on-remove="handlePictureCardRemove.bind(this,index)" :on-change="handlePictureCardPreview.bind(this,index)">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-button type="primary" v-if="index == (domains.length-1)" plain @click="addDomain">添加</el-button>
                        <el-button type="danger" v-if="domains.length > 1" plain @click="removeDomain(item)">删除</el-button>
                    </el-form-item>
                </el-form>


          </div>
      </div>
      <div class="tab1">
          <div class="title">图文描述</div>
          <div class="form2">
              <div class="form_title">
                <span> <i>*</i> 商品图片</span>
              </div>
              <div class="form_img">
                <div class="images">
                  <el-upload action="" class="up_img" :auto-upload="false" :file-list="goodsMainImageUrl" list-type="picture-card" :on-remove="handlePreviewMainRemove" :on-change="handlePreviewMain">
                      <i class="el-icon-plus"></i>
                      <!-- <img class="el-upload-list__item-thumbnail" :src="file.url" /> -->
                  </el-upload>
                  <p>首页主图</p>
                </div>
                <div class="images">
                  <el-upload action="" class="up_img2" :limit="3" :auto-upload="false" :file-list="detailImageUrl" list-type="picture-card" :on-remove="handlePRemove" :on-change="handlePreview">
                      <i class="el-icon-plus"></i>
                  </el-upload>
                </div>
              </div>

          </div>
          <div class="form2">
              <div class="form_title">
                <span> <i>*</i> 详情描述</span>
              </div>
              <div class="rich_text">
                <tinymce :tinymceHtml.sync="form.content" />
              </div>
          </div>

          <div class="submit_form">
              <el-button type="primary" :disabled="loading" size="medium" @click="submit">提交</el-button>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      isShowLace: false,
      form:{},
      domains: [
        {
          id:0,
          material:'',
          color:'',
          model:'',
          lace:'',
          price:'',
          checked: 2,
          imageFile: []
        }
      ],
      types:[],
      styles:[],
      factorys:[],
      colorModels:{},
      goodsMainImageUrl: [],
      detailImageUrl:[]


    }
  },
  computed:{
    queryId: function(){
      return this.$route.query.id
    },
  },
  async created(){
    this.$nextTick(function(){
      this.$set(this.$route.meta,'title',this.$route.query.title);
    });
    await this.selectCommodityTypeList();
    await this.selectFactoryList();
    if(this.queryId){
      this.selectCommodity();
    }
  },
  methods: {
    initData(){
      this.domains = [
        {
          id:0,
          material:'',
          color:'',
          model:'',
          lace:'',
          price:'',
          checked: 2,
          imageFile: []
        }
      ];
    },
    async selectCommodity(){
      this.loading = true;
      let res = await this.$http.selectCommodity({id: this.queryId});
      this.loading = false;
      if(res.data.code == 0){
        await this.selectTypes(res.data.data.typeId);
        await this.selectStyle(res.data.data.styleId);
        this.$set(this.form,'typeId',res.data.data.typeId);
        this.$set(this.form,'styleId',res.data.data.styleId);
        this.$set(this.form,'commodityName',res.data.data.commodityName);
        this.$set(this.form,'factoryId',res.data.data.factoryId);
        this.$set(this.form,'commodityNumber',res.data.data.commodityNumber);
        this.$set(this.form,'content',res.data.data.content);
        if(res.data.data.commodityDetails.length != 0){
          this.domains = [];
          res.data.data.commodityDetails.forEach(item=>{
            this.domains.push({
              id: item.id,
              material: Number(item.material),
              color:Number(item.color),
              model:Number(item.model)||'',
              lace:Number(item.lace)||'',
              price:item.price,
              checked: item.isAutoDispatch,
              imageFile: [{url:item.picUrl}],
            });

          });
        }
        this.goodsMainImageUrl.push({ url :res.data.data.commodityPics[0].picUrl});
        for(let i=1;i< res.data.data.commodityPics.length;i++){
          this.detailImageUrl.push({
            url: res.data.data.commodityPics[i].picUrl
          });
        }
        this.$forceUpdate();

      }
    },
    async selectCommodityTypeList(){
      this.loading = true;
      let res = await this.$http.selectCommodityTypeList();
      this.loading = false;
      if(res.data.code == 0){
        this.types = res.data.data;
      }
    },
    async selectFactoryList(){
      this.loading = true;
      let res = await this.$http.selectNewFactoryList();
      this.loading = false;
      if(res.data.code == 0){
        this.factorys = res.data.data;
      }
    },
    async selectTypes(e){
      this.$set(this.form,'styleId','');
      this.initData();
      this.loading = true;
      let res = await this.$http.selectCommodityStyleList({typeId: e});
      this.loading = false;
      if(res.data.code == 0){
        this.styles = res.data.data;
      }
    },
    async selectStyle(e){
      this.initData();
      this.loading = true;
      let res = await this.$http.selectCommodityParamList({styleId: e});
      this.loading = false;
      if(res.data.code == 0){
        this.isShowLace = res.data.data.laces?true:false;
        this.colorModels = res.data.data;
      }
    },

    handlePictureCardPreview(index,file,fileList){
      let formdata = new FormData();
      formdata.set('file', file.raw);
      this.loading = true;
      this.$http.uploadImg(formdata).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.domains[index].imageFile.push({
            url: res.data.data
          });
          this.$message.success('上传成功');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handlePictureCardRemove(index){
      this.domains[index].imageFile=[];
    },
    handlePreviewMain(file){
      let formdata = new FormData();
      formdata.set('file', file.raw);
      this.loading = true;
      this.$http.uploadImg(formdata).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.goodsMainImageUrl.push({url: res.data.data});
          this.$message.success('上传成功');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handlePreviewMainRemove(){
      this.goodsMainImageUrl = [];
    },
    handlePreview(file,fileList){
      let formdata = new FormData();
      formdata.set('file', file.raw);
      this.loading = true;
      this.$http.uploadImg(formdata).then(res=>{
        this.loading = false;
        if(res.data.code == 0){
          this.detailImageUrl.push({
            uid: file.uid,
            url: res.data.data
          });
          this.$message.success('上传成功');
        }else{
          this.$message.error(res.data.message);
        }
      });
    },
    handlePRemove(file){
      this.detailImageUrl = this.detailImageUrl.filter(item=>item.uid != file.uid);
    },

    removeDomain(item){
      var index = this.domains.indexOf(item)
      if (index !== -1) {
        this.domains.splice(index, 1)
      }
    },
    addDomain(){
      this.domains.push({
        id: 0,
        material:'',
        color:'',
        model:'',
        lace: '',
        price:'',
        checked: 2,
        imageFile: []
      })
    },
    async insertCommodity(data){
      this.loading = true;
      let res = null;
      if(this.queryId){
        data.id = this.queryId;
        res = await this.$http.updateCommodity(data);
      }else{
        res = await this.$http.insertCommodity(data);
      }
      this.loading = false;
      if(res.data.code == 0){
        this.$message.success(res.data.message);
        this.$router.back();
      }else{
        this.$message.error(res.data.message);
      }
    },
    sortData(name){
      let result = [];
      this.domains.forEach(item=>{
        if(name == 'imageFile'){
          result.push(item[name][0].url);
        }else{
          result.push(item[name]);
        }
      });
      // if(result.length == 0){
      //   return '';
      // }
      return result.join(',');
    },
    submit(){
      if(!this.form.typeId){
        this.$message.error('请选择商品类型！！');
        return false;
      }else if(!this.form.styleId){
        this.$message.error('请选择商品款式！！');
        return false;
      }else if(!this.form.commodityName){
        this.$message.error('请填写商品名称！！');
        return false;
      }else if(!this.form.factoryId){
        this.$message.error('请选择制作工厂！！');
        return false;
      }else if(!this.form.commodityNumber){
        this.$message.error('请填写商品编码！！');
        return false;
      }
      for(let i=0;i<this.domains.length;i++){
        if(!this.domains[i].material){
          this.$message.error('请选择材料！！');
          return false;
        }
        if(!this.domains[i].color){
          this.$message.error('请选择颜色！！');
          return false;
        }
        // if(!this.domains[i].model){
        //   this.$message.error('请选择型号！！');
        //   return false;
        // }
        // if(this.isShowLace && !this.domains[i].lace){
        //   this.$message.error('请选择蕾丝！！');
        //   return false;
        // }
        if(!this.domains[i].price){
          this.$message.error('请填写价格！！');
          return false;
        }
        if(this.domains[i].imageFile.length == 0){
          this.$message.error('请上传图！！');
          return false;
        }
      }
      if(this.goodsMainImageUrl.length == 0){
        this.$message.error('请上传主图！！');
        return false;
      }
      if(this.detailImageUrl.length==0){
        this.$message.error('请上传详情图！！');
        return false;
      }
      this.form.content = tinyMCE.activeEditor.getContent();
      if(!this.form.content){
        this.$message.error('请输入商品详情！！');
        return false;
      }
      let detailUrl = [];
      this.detailImageUrl.forEach(item=>{
        detailUrl.push(item.url);
      });
      let data = {
        detailIds:this.sortData('id'),
        styleId: this.form.styleId,
        commodityName: this.form.commodityName,
        factoryId: this.form.factoryId,
        commodityNumber: this.form.commodityNumber,
        materials: this.sortData('material'),
        models: this.sortData('model')+',',
        colors: this.sortData('color'),
        laces: this.sortData('lace')+',',
        prices: this.sortData('price'),
        isAutoDispatchs: this.sortData('checked'),
        mainUrl: this.goodsMainImageUrl[0].url,
        detailUrl: detailUrl.join(','),
        paramUrl: this.sortData('imageFile'),
        content:this.form.content
      };
      // console.log(data);
      this.insertCommodity(data);
    },

  }
}
</script>

<style lang="css" scoped>
i{font-style: normal}
.tab1{
  background: #fff;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #E8E8E8;
  overflow: hidden;
}
.form{
  width: 38%;
  padding: 20px 0;
  margin-left: 50px;
}
.form .form_item{
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.form .form_item span{
  font-size: 13px;
  color: #333333;
  margin-right: 10px
}
.tab1 i{
  color: #FB3F3F;
}
.form_item .el-input{
  width: 200px
}
.title{
  width: 100%;
  color: #4196FF;
  padding: 12px 15px;
  background-color:#DAEBFF;
  box-sizing: border-box;
}
.form2 .form_title{
  font-size: 13px;
  color: #333333;
  margin-right: 10px;
  line-height: 60px;
  height: 40px;
  margin-left: 50px
}
/deep/.el_form .el-form-item__content{
  margin-left: 50px;
  display: flex;
  align-items: center
}
.form_img{
  display: flex;
  padding-bottom: 25px;
}
.el_form .el_select{
  margin-right: 10px;
}
.el_form .el_input{
  margin-right: 10px;
  width: 150px
}
.el_form .el-select{
  width: 140px;
}
.upload_img{
  width: 50px;
  height: 50px;
  overflow: hidden;
  margin-right: 10px;
}
/deep/.upload_img .el-upload-list--picture-card .el-upload-list__item{
  display: block;
  width: 100%;
  height: 100%
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail{
  width: 100%;
}
/deep/.upload_img .el-upload{
  width: 50px;
  height: 50px;
  line-height: 60px;
}
.images{
  margin-left: 50px;
  margin-top: 10px;
  display: inline-block;
  position: relative;
  text-align: center
}
.images p{
  font-size: 12px;
  color: #999;
  line-height: 25px;
  position: absolute;
  bottom: -25px;
  width: 100%
}
.up_img{
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.up_img2 {
  height: 100px;
}
/deep/.up_img2 .el-upload--picture-card{
  width: 100px;
  height: 100px;
  line-height: 110px;
}
/deep/.up_img2 .el-upload-list--picture-card .el-upload-list__item{
  width: 100px;
  height: 100px;
}
/deep/.up_img .el-upload-list--picture-card .el-upload-list__item{
  display: block;
  width: 100%;
  height: 100%
}
/deep/.up_img .el-upload{
  width: 100px;
  height: 100px;
  line-height: 110px;
}
.rich_text{
  width: 1000px;
  margin-left: 50px;
  margin-top: 10px;
  margin-bottom: 30px;
}
.submit_form{
  margin-top: 20px;
  text-align: center;
  margin-bottom: 30px;
}
</style>
